import React, { useEffect } from 'react';
import { getDashboard } from '@/services/api';

// 引入 ECharts 主模块
const echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

const GradeEchars = () => {
  useEffect(() => {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('GradeEchars'), 'light');
    getDashboard().then((resp: any) => {
      const dataAxis: any = [];
      const data: any = [];
      if (resp.status === 'success') {
        resp.data.grade_students_num.forEach((e: any) => {
          dataAxis.push(e.grade_name);
          data.push(e.cnt);
        });
      }

      const yMax = 500;
      const dataShadow = [];

      // eslint-disable-next-line no-plusplus
      for (let i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
      }

      const option = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: dataAxis,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '人数',
            type: 'bar',
            barWidth: '60%',
            data,
          },
        ],
      };

      myChart.setOption(option);
    });
  }, []);

  return <div id="GradeEchars" style={{ width: '100%', height: 400 }} />;
};

export default GradeEchars;
